<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <el-button type="primary" v-has size="medium" @click="addItem">新增模板</el-button>
      <el-button type="primary" size="medium" @click="refresh" style="margin-left:15px">刷新模板</el-button>
    </div>
    <div class="list_con">
      <el-table

        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column prop="name" label="模板名称"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!-- <el-button v-if="scope.row.default == 0" type="text" @click="itemDefault(scope.row.id)">设为默认</el-button> -->
            <el-button v-has type="text" @click="itemEdit(scope.row.id)">编辑</el-button>
            <el-button v-has type="text" @click="itemDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div> -->
    </div>
  </el-container>
</template>

<script>
import {
  getinvoiceList
} from '@/api/shop/print';

export default {
  data(){
    return {
      //page:1,
      //size:10,
      //total:0,
      isLoading: false,
      list:[]
    }
  },
  components: {},
  mounted(){
    this.searchList();
  },
  methods:{
    //刷新数据
    refresh(){
      this.getDataList();
    },
    //新增记录
    addItem(){
      this.$router.push('/print/template/editInvoice');
    },
    //查询数据
    searchList(){
      //复制查询对象
      //this.objTemp = Object.assign({},this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getinvoiceList({page:1,size:100}).then(res => {
        this.isLoading = false;
        this.list = res.msg.data;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //设为默认
    itemDefault(id){
      this.isLoading = true;
      editEBDefault(id).then(res => {
        this.isLoading = false;
        this.getDataList();
      }).catch(e => {
        this.isLoading = false;
      })
    },
    //编辑记录
    itemEdit(id){
      this.$router.push({
        path:'/print/template/editInvoice',
        query:{
          id:id,
          k:Math.random()
        }
      })
    },
    //删除记录
    itemDel(id){
      this.$confirm('是否要删除该模板?').then(_ => {
        this.isLoading = true;
        delinvoice(id).then(res => {
          this.isLoading = false;
          this.getDataList();
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.pro{
  display: flex;

  .info{
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name{
      display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }
  }
}

.user{
  display: flex;

  .info{
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name{
      display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

  }
}
</style>
